<template>
  <div
    class="bg w-full h-full"
    :style="{
      background: `url(${getAssetsFile('home/bg.png')})no-repeat`,
      'background-size': 'cover',
    }"
  >
    <div class="mt-[80px] ml-[95px] text-[48px] font-bold">
      <el-image
        @click="router.push('/index/home')"
        :src="getAssetsFile('home/logo1.png')"
        class="w-[110px] h-[80px] cursor-pointer"
      ></el-image>
    </div>
    <div
      class="h-[500px] rounded-[10px] bg-white top-[180px] right-[300px] w-[450px] absolute px-[50px] py-[70px]"
      style="box-shadow: 0px 0px 10px 4px rgba(134, 198, 250, 0.29)"
    >
      <div class="text-[24px] text-center">欢迎登录暖心保</div>
      <div
        class="w-full flex items-center bg-[#FBFBFB] h-[60px] px-[30px] mt-[60px] rounded-[5px]"
      >
        <div class="min-w-[18px] max-h-[18px] h-[18px]">
          <el-image
            :src="getAssetsFile('home/mobile.png')"
            class="w-full h-full"
          ></el-image>
        </div>
        <div class="ml-[20px] w-full">
          <el-input
            v-model="Info.mobile"
            placeholder="请输入手机号"
            style="font-size: 16px"
          />
        </div>
      </div>
      <div
        class="w-full flex items-center bg-[#FBFBFB] h-[60px] px-[30px] mt-[20px] rounded-[5px]"
      >
        <div class="min-w-[18px] max-h-[18px] h-[18px]">
          <el-image
            :src="getAssetsFile('home/password.png')"
            class="w-full h-full"
          ></el-image>
        </div>
        <div class="ml-[20px] w-full">
          <el-input
            v-model="Info.password"
            placeholder="请输入密码"
            type="password"
            style="font-size: 16px"
          />
        </div>
      </div>
      <!-- <div
        class="w-full flex items-center bg-[#FBFBFB] h-[80px] px-[30px] mt-[20px]"
      >
        <div class="min-w-[30px] max-h-[30px] h-[30px]">
          <el-image
            :src="getAssetsFile('home/code.png')"
            class="w-full h-full"
          ></el-image>
        </div>
        <div class="ml-[20px] w-full">
          <el-input v-model="Info.code" placeholder="请输入验证码" />
        </div>
      </div> -->

      <div
        @click="sumbit"
        class="mt-[70px] h-[60px] w-full bg-[#29a0f5fd] rounded-[5px] flex items-center justify-center text-[20px] font-bold text-white cursor-pointer"
      >
        登 录
      </div>
    </div>
  </div>
  <div
    class="absolute bottom-[20px] w-full flex justify-center items-center text-[#333333] text-[14px]"
  >
    <span
      >© 2018 天津协和万邦保险经纪有限公司
      <a class="text-blue-600" href="https://beian.miit.gov.cn/#/Integrated/index"
        >津ICP备15000955号-4</a
      >
      <a class="text-blue-600 ml-[10px]" href="https://beian.mps.gov.cn/#/query/webSearch"
        >津公网安备 12011402000458号</a
      ></span
    >
    <span class="ml-[30px]">天津协和万邦保险经纪有限公司</span>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl.ts";
import { ref, reactive, inject } from "vue";
import { login, checkLogin } from "@/utils/api";
import { useRouter } from "vue-router";
const router = useRouter();
const inputVal = ref("");
const Info = reactive({
  mobile: "",
  password: "",
  code: "",
});
const message = inject<any>("message");
const sumbit = async () => {
  const res = await login(Info);
  if (res.code == 1) {
    message.success(res.msg);
    router.push("/index/home");
  } else {
    message.warning(res.msg);
  }
};
const getData = async () => {
  const res = await checkLogin("");
  if (res.code) {
    router.push("/index/home");
  }
};
getData();
</script>
<style scoped lang="scss">
.bg {
  position: fixed;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: #fbfbfb !important;
}
</style>
